<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保洁员信息管理</title>
    <!--bootstrap js样式-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
    <!--1.bootstrap css样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <!--2.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--3.jquery 插件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <link type="text/css" rel="stylesheet" href="../layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="../layui-v2.5.7/layui/layui.js"></script>


    <style>
        .layui-table{
            text-align: center;
        }
    </style>

</head>
<body>
<div class="layui-layout-body" style="border: #282b33 solid 1px">
    <blockquote class="layui-elem-quote"><span style="color:red;">！！！删除后不可恢复</span></blockquote>
    <div class="layui-layout-body">
        <div class="clearfloat">
            <div class="glyphicon glyphicon-list col-md-1">数据表</div>
            <a href="cleanerInformationManage.html">
                <button id="addBtn" type="button" class="layui-btn col-md-1" style="float: right">退出</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </div>
        <hr>


        <div class="layui-row">
            <div class="layui-col-md6">
                <!--名字模糊搜索栏-->
                <div class="demoTable">
                    搜索姓名：
                    <div class="layui-inline">
                        <input placeholder="支持模糊查询" class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="showBtn" type="button" class="layui-btn layui-btn-warm">退出搜索</button><br>
                </div>
            </div>
            <!--<div class="layui-col-md6">
                &lt;!&ndash;手机号码搜索栏&ndash;&gt;
                <div class="demoTable ">
                    搜索手机号码：
                    <div class="layui-inline">
                        <input placeholder="请数据完整手机号码" class="layui-input" name="id" id="exactSelectTelephoneNumber" autocomplete="off">
                    </div>
                    <button id="exactBtn" class="layui-btn" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="showBtn" type="button" class="layui-btn layui-btn-warm">退出搜索</button><br>
                </div>
            </div>-->
        </div>



        <!--展示所有数据-->
        <div id="selectAllTable">
            <table class="layui-hide" id="testSelectAllTable" lay-filter="test"></table>
        </div>
        <!--展示模糊查询到的数据-->
        <div id="portionTable">
            <table class="layui-hide" id="testPortionTable" lay-filter="test"></table>
        </div>
        <!--展示手机号码查询到的数据
        <div id="telephoneNumberTable">
            <table class="layui-hide" id="testTelephoneNumberTable" lay-filter="test"></table>
        </div>-->

    </div>



</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="getCheckData">删除选中行数据</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="restore">还原</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--展示图片的控件-->
<script type="text/html" id="imgtmp">
    <img src = "http://127.0.0.1:8080{{d.portrait}}">
</script>

<style type="text/css">
    .layui-table-cell{
        height:115px;
        white-space:normal;
    }
</style>

<!--点击退出搜索按钮-->
<script>
    $("#showBtn").click(function (){
        //将展示模糊查询的表格隐藏, 并显示查询所有数据的表格
        $("#portionTable").hide();
        $("#telephoneNumberTable").hide();
        $("#selectAllTable").show();
    })
</script>


<!--&lt;!&ndash;展示手机号码查询数据&ndash;&gt;
<script>
    $("#exactBtn").click(function (){
        /*将查询所有数据的表格隐藏起来*/
        $("#selectAllTable").hide();
        $("#portionTable").hide();
        $("#telephoneNumberTable").show();
        let telephoneNumber = $("#exactSelectTelephoneNumber").val();

        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;

            let cleaner = {}


            table.render({
                elem: '#testTelephoneNumberTable'
                ,url:'http://localhost:8080/cleanerInformation/controller/CleanerVagueSelectTelephoneNumber'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,where:{
                    telephoneNumber:telephoneNumber
                }
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', width:150, title: 'ID', sort: true}
                    ,{field:'portrait',
                        title: '头像',
                        width:150,
                        templet:"#imgtmp"
                    }
                    ,{field:'name', width:150, title: '姓名', sort: true}
                    ,{field:'sex', width:150, title: '性别'}
                    ,{field:'age',width:150, title: '年龄'}
                    ,{field:'telephoneNumber', width:150, title: '手机号码', sort: true}
                    ,{field:'synopsis', width:570, title: '简介', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true

            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'getCheckData'){
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.confirm('真的删除行么? 删除后不可还原', function(index){
                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/RestoreDeleteAllController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:JSON.stringify(data),//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"POST",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;//获得当前行数据
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();



                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:data.id,//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"GET",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });

                        layer.close(index);

                    });
                } else if(obj.event === 'edit'){

                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "信息修改",
                        area: ['420px', '500px'],
                        content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
                        success: function (layero, index) {//弹出层打开后的回调函数,数据回显
                            layer.iframeAuto(index);
                            //popUpdateTest为弹出层id,name为数据表格的field属性
                            //信息回显
                            $("#id").val(data.id);
                            $("#name").val(data.name);
                            $("#sex").val(data.sex);
                            $("#age").val(data.age);
                            $("#telephoneNumber").val(data.telephoneNumber);
                            $("#synopsis").val(data.synopsis);
                        },
                    });

                }
            });
        });
    })
</script>-->


<!--展示模糊查询数据-->
<script>
    $("#searchBtn").click(function (){
        /*将查询所有数据的表格隐藏起来*/
        $("#selectAllTable").hide();
        $("#telephoneNumberTable").hide();
        $("#portionTable").show();
        let name = $("#demoReload").val();

        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;

            let cleaner = {}


            table.render({
                elem: '#testPortionTable'
                ,url:'http://localhost:8080/cleanerInformation/controller/RestoreVagueSelectNameController'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,where:{
                    name:name
                }
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', width:150, title: 'ID', sort: true}
                    ,{field:'portrait',
                        title: '头像',
                        width:150,
                        templet:"#imgtmp"
                    }
                    ,{field:'name', width:150, title: '姓名', sort: true}
                    ,{field:'sex', width:150, title: '性别'}
                    ,{field:'age',width:150, title: '年龄'}
                    ,{field:'telephoneNumber', width:150, title: '手机号码', sort: true}
                    ,{field:'synopsis', width:570, title: '简介', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true

            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'getCheckData'){
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.confirm('真的删除行么? 删除后不可还原', function(index){
                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/RestoreDeleteAllController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:JSON.stringify(data),//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"POST",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;//获得当前行数据
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();



                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/RestoreDeleteController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:data.id,//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"GET",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });

                        layer.close(index);

                    });
                } else if(obj.event === 'restore'){

                    layer.confirm('真的还原么', function(index){
                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/RestoreController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:data.id,//向服务端发送还原的id
                            },
                            //设置请求方式
                            type:"GET",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("还原成功",{icon:1});
                                }else{
                                    alert("还原失败")
                                }
                            }
                        });

                        layer.close(index);

                    });

                }
            });

        });
    })
</script>




<!--展示所有数据-->
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        let cleaner = {}


        table.render({
            elem: '#testSelectAllTable'
            /*http://localhost:8080/cleanerInformation/controller/CleanerSelectController*/
            ,url:'http://localhost:8080/cleanerInformation/controller/RestoreSelectController'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id',width:150, title: 'ID', sort: true}
                ,{field:'portrait',
                    title: '头像',
                    width:150,
                    templet:"#imgtmp"
                }
                ,{field:'name', width:150,title: '姓名', sort: true}
                ,{field:'sex', width:150, title: '性别'}
                ,{field:'age',width:150, title: '年龄'}
                ,{field:'telephoneNumber',width:150,  title: '手机号码', sort: true}
                ,{field:'synopsis',width:570,  title: '简介', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true

        });



        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'getCheckData'){
                var data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                layer.confirm('真的删除行么? 删除后不可还原', function(index){
                    $.ajax({
                        //请求的url地址
                        url: "http://localhost:8080/cleanerInformation/controller/RestoreDeleteAllController",
                        //要求服务器响应的数据格式
                        dataType: "json",
                        //请求是否为异步,  true为异步,   false为同步
                        async: true,
                        //发送请求给服务器所携带的数据
                        data:{
                            message:JSON.stringify(data),//向服务端发送删除的id
                        },
                        //设置请求方式
                        type:"POST",
                        //请求成功的处理
                        success:function (result){
                            //如果响应的状态码为200证明添加数据的请求成功
                            if(result.status === 200){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功",{icon:1});
                            }else{
                                alert("删除失败")
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;//获得当前行数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么? 删除后不可恢复', function(index){
                    //obj.del();
                    $.ajax({
                        //请求的url地址
                        url: "http://localhost:8080/cleanerInformation/controller/RestoreDeleteController",
                        //要求服务器响应的数据格式
                        dataType: "json",
                        //请求是否为异步,  true为异步,   false为同步
                        async: true,
                        //发送请求给服务器所携带的数据
                        data:{
                            message:data.id,//向服务端发送删除的id
                        },
                        //设置请求方式
                        type:"GET",
                        //请求成功的处理
                        success:function (result){
                            //如果响应的状态码为200证明添加数据的请求成功
                            if(result.status === 200){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功",{icon:1});
                            }else{
                                alert("删除失败")
                            }
                        }
                    });

                    layer.close(index);
                    window.location.href = "recycleBin.html"

                });
            } else if(obj.event === 'restore'){
                layer.confirm('真的还原么', function(index){
                    $.ajax({
                        //请求的url地址
                        url: "http://localhost:8080/cleanerInformation/controller/RestoreController",
                        //要求服务器响应的数据格式
                        dataType: "json",
                        //请求是否为异步,  true为异步,   false为同步
                        async: true,
                        //发送请求给服务器所携带的数据
                        data:{
                            message:data.id,//向服务端发送还原的id
                        },
                        //设置请求方式
                        type:"GET",
                        //请求成功的处理
                        success:function (result){
                            //如果响应的状态码为200证明添加数据的请求成功
                            if(result.status === 200){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("还原成功",{icon:1});
                            }else{
                                alert("还原失败")
                            }
                        }
                    });

                    layer.close(index);

                });

            }
        });
    });
</script>


</body>

</html>